<template>
    <div class="layout-padding">
        <div class="layout-padding-auto layout-padding-view">
            <el-row shadow="hover" v-show="showSearch" class="ml10">
                <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
                    <el-form-item :label="$t('aigcEmbedStore.provider')" prop="provider">
                        <el-select v-model="state.queryForm.provider" :placeholder="$t('aigcEmbedStore.inputProviderTip')">
                            <el-option v-for="item in llm_embedStore_provider" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :label="$t('aigcEmbedStore.name')" prop="name">
                        <el-input v-model="state.queryForm.name" :placeholder="$t('aigcEmbedStore.inputNameTip')"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button icon="search" type="primary" @click="getDataList">{{ $t('common.queryBtn') }}</el-button>
                        <el-button icon="Refresh" @click="resetForm">{{ $t('common.resetBtn') }}</el-button>
                    </el-form-item>
                </el-form>
            </el-row>
            <el-row>
                <div class="mb8" style="width:100%">
                    <el-button icon="Plus" type="primary" @click="handleAdd" class="ml10" v-auth="'aigc_embed_store_add'" >{{ $t('common.addBtn') }}</el-button>
                    <el-button plain :disabled="multiple" icon="Delete" type="primary" class="ml10" v-auth="'aigc_embed_store_delete'" @click="handleDelete(selectObjs)">
						{{ $t('common.delBtn') }}
					</el-button>
                    <right-toolbar
                        v-model:showSearch="showSearch"
                        :export="'aigc_embed_store_export'"
                        @exportExcel="exportExcel"
                        class="ml10"
                        style="float: right; margin-right: 20px"
                        @queryTable="getDataList"/>
                </div>
            </el-row>
            <el-table :data="state.dataList"
                v-loading="state.loading"
                style="width: 100%"
                border
                @selection-change="handleSelectionChange"
                :cell-style="tableStyle.cellStyle"
                :header-cell-style="tableStyle.headerCellStyle"
            >
                <el-table-column type="selection" width="50" align="center"></el-table-column>
                <el-table-column :label="$t('aigcEmbedStore.name')" prop="name" align="center"></el-table-column>
                <el-table-column :label="$t('aigcEmbedStore.provider')" prop="provider" align="center"></el-table-column>
                <el-table-column :label="$t('aigcEmbedStore.host')" prop="host" align="center"></el-table-column>
                <el-table-column :label="$t('aigcEmbedStore.port')" prop="port" align="center"></el-table-column>
                <el-table-column :label="$t('aigcEmbedStore.databaseName')" prop="databaseName" align="center"></el-table-column>
                <el-table-column :label="$t('aigcEmbedStore.tableName')" prop="tableName" align="center"></el-table-column>
                <el-table-column :label="$t('aigcEmbedStore.dimension')" prop="dimension" align="center"></el-table-column>
                <el-table-column :label="$t('aigcEmbedStore.createTime')" prop="createTime" align="center"></el-table-column>
                <el-table-column :label="$t('common.action')" align="center" width="250">
                    <template #default="scope">
                        <el-button text type="primary" icon="edit-pen"  v-auth="'aigc_embed_store_edit'" @click="handleUpdate(scope.row)">{{ $t('common.editBtn') }}</el-button>
                        <el-button text icon="delete" v-auth="'aigc_embed_store_delete'" @click="handleDelete([scope.row.id])">{{ $t('common.delBtn') }}</el-button>
                    </template>
                </el-table-column>

            </el-table>
            <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
        </div>
        <!--新增修改-->
        <embed-store-dialog ref="dialogRef" @refresh="getDataList()" />
    </div>
</template>

<script setup lang="ts" name="aigcEmbedStore">
    import {useI18n} from "vue-i18n";
    import {pageList, delObj} from "/@/api/aigc/embedStore";
    import { useMessage, useMessageBox } from '/@/hooks/message';
    import {BasicTableProps,useTable} from "/@/hooks/table";
    import {useDict} from '/@/hooks/dict';
    //引入组件
    const EmbedStoreDialog = defineAsyncComponent(() => import('./form.vue'));
    //模型列表
    const {llm_embedStore_provider} = useDict('llm_embedStore_provider');
    const {t} = useI18n();
    const dialogRef = ref();
    const queryRef = ref();
    const showSearch = ref(true);
    //多选
    const selectObjs = ref([]);
    //是否可以多选
    const multiple = ref(true);

    //表格数据
   const state: BasicTableProps = reactive<BasicTableProps>({
        queryForm: {
            provider: '',
            name:'',
        },
        pageList: pageList,
        descs: ['create_time'],
    }); //  table hook
    const {getDataList,currentChangeHandle,sizeChangeHandle,downBlobFile,tableStyle} = useTable(state);

    // 多选事件
    const handleSelectionChange = (objs: { id: string }[]) => {
    	selectObjs.value = objs.map(({ id }) => id);
    	multiple.value = !objs.length;
    };
    //重置表单
    const resetForm=()=>{
        queryRef.value.resetFields();
        getDataList();
   }
    //新增
    const handleAdd = () => {
        dialogRef.value.openDialog();
    };
    //修改
    const handleUpdate = (row) => {
        dialogRef.value.openDialog(row.id);
    };
    //删除
    const handleDelete = async (ids: string[]) => {
        try {
    		await useMessageBox().confirm(t('common.delConfirmText'));
    	} catch {
    		return;
    	}
        // 删除数据
        try{
            await delObj(ids);
            getDataList();
            useMessage().success(t("common.delSuccessText"));
        } catch (err) {
            console.error(err);
        }
    };
    //导出
    const exportExcel = ()=>{
        downBlobFile('/aigc/embed/store/exportExcel',state.queryForm,'aigcEmbedStore.xlsx');
    }
</script>